<template>
	<view class="javascript" :style="{'height':status?'auto':'84rpx'}">
		<view @click="status = !status" v-if="!status" class="javascript-btn">展开
		</view>
		<view class="code-bg">
			<view class="code-copy"><span @click='copy' class="span-code">复制</span></view>	
			<pre><code>{{code}}</code></pre>
		</view>
		<!-- <view @click="status = !status" class="javascript-btn">关闭</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: !false,
			}
		},
		props:{
			code:{
				typeof:String,
				default:""
			}
		},
		methods:{
			copy(){
				uni.$ct.copyText({
					data:this.code,
					success:(e)=>{
						uni.showToast({
							icon:'none',
							title:"复制成功"
						})
					},
					fail:(e)=>{
						uni.showToast({
							icon:'none',
							title:"复制失败"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.javascript {
		// border: 2px solid #f6f6f6;
		// padding: 24rpx 24rpx 0;
		overflow: hidden;
		box-sizing: border-box;

		.code-bg {
			background-color: #f9f9f9;
			display: block;
			font-size: 24rpx;
			padding: 24rpx 10rpx;
			overflow-x: scroll;
			position: relative;
			code{
				color: #3182bd !important;
			}
			.code-copy{
				position: absolute;
				right: -200rpx;
				top: 20rpx;
			}
		}
		.code-bg:hover{
			.code-copy{
				right: 20rpx;
			}
		}
		.javascript-btn {
			margin: 0 auto;
			border: 1px solid $ct-border-color;
			text-align: center;
			font-size: 24rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
	}
</style>